<template>
  <div class="user-pagination">
    <el-pagination
      v-model:current-page="currentPage"
      page-size="[10, 20, 30, 40]"
      layout="sizes, prev, pager, next, jumper, total"
      :total="usersTotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentPage = ref(1);

const { usersList, usersTotalCount } = defineProps<{
  usersList: any[];
  usersTotalCount: number;
}>();

const emit = defineEmits(["page-size-change", "page-current-change"]);

const handleSizeChange = (val: number) => {
  emit("page-size-change", val);
};
const handleCurrentChange = (val: number) => {
  emit("page-current-change", val);
};
</script>

<style lang="less" scoped>
.user-pagination {
  margin-top: 20px;
  margin-right: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
